{extend name="personal/index" /}

  {block name="center"}
  <link href="static/css/password/common.css" rel="stylesheet" />
  <link href="static/css/password/safety.css" rel="stylesheet" />
  <link href="static/css/password/ui-dialog.css" rel="stylesheet" />



    <div class="personal-main userInfo fr" style="width:780px">
     <!-- 个人资料 start -->
     <div class="personal-module">
      <div class="ps-md-hd clearfix">
       <h6 class="ps-md-hd-tit fl">个人资料</h6>
      </div>
      <div class="ps-md-bd">
       <!-- 基本资料 start -->
       <div class="ui-tab">
        <div class="ui-tab-head">
         <div class="ui-tab-ctrl fl">
          <a href="indexPersonalZiliaoZhaopassword" class="ui-tab-btn ui-tab-cur">安全设置</a>
         </div>
        </div>

     <!-- 修改登录密码 第一步 start -->
     <div class="personal-module">
      <div class="ps-md-hd clearfix">
       <h6 class="ps-md-hd-tit fl">找回密码</h6>
      </div>
      <div class="ps-md-bd">
       <div class="safety-form clearfix">
        <form id="form" action="indexPersonalZiliaoDozhaopassword" method="post" name="setLoginPasswordForm" onsubmit="return checkForm()" class="J-setLoginPasswordForm" novalidate="novalidate">
         
         <div class="safety-form-row clearfix">
          <div class="safety-form-label fl">
           选择一个密保问题：
          </div>
          <div class="safety-form-span fl">
           <select name="question" id="select">
             <option value="你的手机号码是多少?">你的手机号码是多少?</option>
             <option value="你的QQ号码是多少?">你的QQ号码是多少?</option>
             <option value="你的微信号码是多少?">你的微信号码是多少?</option>
           </select>
           <p class="form-error fl"></p>
          </div>
         </div>
         <div class="safety-form-row clearfix">
          <div class="safety-form-label fl">
           请输入密保答案：
          </div>
          <div class="safety-form-span fl">
           <input type="text" name="answer" id="answer"  onblur="checkAnswer()" class="input safety-form-email fl J-password" data-element=".J-oldPassword" />
           <p class="form-error fl"></p>
          </div>
         </div>
         <div class="safety-form-row clearfix">
          <div class="safety-form-label fl">
           新的密码：
          </div>
          <div class="safety-form-span fl">
           <input type="password" name="pwd" id="newPassword" onblur="checkPass()" class="input safety-form-email fl J-oldPassword" />
           <p class="form-error fl"></p>
          </div>
         </div>
         <div class="safety-form-row clearfix">
          <div class="safety-form-label fl">
           确认密码：
          </div>
          <div class="safety-form-span fl">
           <input type="password" name="confirmPassword" id="confirmPassword" onblur="checkRepass()"  class="input safety-form-email fl J-confirmPassword" />
           <p class="form-error fl"></p>
          </div>
         </div>
         <div class="safety-form-row clearfix">
          <div class="safety-form-label fl">
           &nbsp;
          </div>
          <div class="safety-form-span fl">
           <span class="button-light-medium submitBtn">保存<button type="submit"></button></span>
          </div>
         </div>
        </form>
       </div>

      </div>
     </div>
     <!-- 修改登录密码 第一步 end -->

    </div>
    </div>
     <!-- 个人资料 end -->
    </div>
   </div>

  <script>
  
      function checkPass(){
            if ($('#newPassword').val().match(/^[a-zA-Z]\w{5,17}$/)==null ) {
                $('#newPassword').next('p').html("密码须以字母开头,长度在6~18之间");
                return false;
            }else{
                $('#newPassword').next('p').html("");
                return true;
            }
        }

      function checkRepass(){
          if($('#newPassword').val() !== $('#confirmPassword').val()){
              $('#confirmPassword').next('p').html("两次密码不一致!!!");
              return false;
          }else{
            $('#confirmPassword').next('p').html("");
            return true;
          }
        }

      function checkAnswer(){
        if($('#answer').val().match(/^[\u4E00-\u9FA5A-Za-z0-9_]+$/) == null){
          $('#answer').next('p').html("密保答案不合法!!!");
          return false;
        }else{
          $('#answer').next('p').html("");
          return true;
        }
      }


      function checkForm(){
            return checkPass()&&checkRepass()&&checkAnswer();
        }







  </script>



  {/block}